
// **************
// Theme
// **************

#gn-base-components-theme(@theme-vars) {
    [data-ms2-container],
    body,
    .gn-theme {
        .color-var(@theme-vars[main-color]);
        .background-color-var(@theme-vars[main-bg]);
    }

    a {
        .color-var(@theme-vars[link-color]);
        text-decoration: none;

        &:hover {
            .color-var(@theme-vars[link-hover-color]);
            text-decoration: none;
        }
    }

    .gn-filter-link {
        a {
            .color-var(@theme-vars[main-color]);

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .btn:focus,
    .btn.focus {
        outline: 0;
        .box-shadow-var(@theme-vars[focus-color]);
    }

    .jumbotron {
        background-color: transparent;
    }

    input,
    input:focus {
        .color-var(@theme-vars[main-color]);
        .background-color-var(@theme-vars[main-bg]);
    }

    // default badge color
    .badge {
        .color-var(@theme-vars[badge-color]);
        .background-color-var(@theme-vars[badge-bg]);
    }

    .label {
        .color-var(@theme-vars[main-color]);
        .background-color-var(@theme-vars[main-bg]);
    }
    
    .label-default {
        .color-var(@theme-vars[primary-contrast]);
        .background-color-var(@theme-vars[primary]);
    }

    .page-header {
        .border-color-var(@theme-vars[main-border-color]);
    }
    .gn-pending-changes-icon {
        &::after {
            .background-color-var(@theme-vars[warning]);
        }
    }
    .gn-success-changes-icon {
        &::after {
            .background-color-var(@theme-vars[success]);
        }
    }
    .tabs-underline {
        > .nav > li {
            > a {
                .color-var(@theme-vars[main-color], true);
                .background-color-var(@theme-vars[main-bg], true);
            }
            > a:hover {
                .border-bottom-color-var(@theme-vars[main-border-color]);
            }
            &.active {
                > a {
                    .border-bottom-color-var(@theme-vars[primary]);
                }
            }
        }
    }
    .pagination.custom {
        &> li > a,
        &> li > span {
            background-color: transparent;
        }
        &> .disabled > span,
        &> .disabled > span:hover,
        &> .disabled > span:focus,
        &> .disabled > a,
        &> .disabled > a:hover,
        &> .disabled > a:focus {
            background-color: transparent;
        }
        &> .active > a,
        &> .active > span,
        &> .active > a:hover,
        &> .active > span:hover,
        &> .active > span:focus {
            .color-var(@theme-vars[primary-contrast]);
            .background-color-var(@theme-vars[primary]);
        }
    }
}

// **************
// Layout
// **************

body {
    overflow-x: hidden;
}

[data-ms2-container] {
    margin: 0;
    font-family: @font-family-base;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.gn-page-wrapper:not(.gn-legacy) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.gn-embed,
.gn-catalogue {
    display: flex;
    position: absolute;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .gn-footer {
        position: relative;
    }
    .gn-main-header {
        z-index: 150;
    }
    #ms-container {
        flex: 1;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }
    .gn-card-grid {
        padding-top: 0;
    }
    .gn-filters-menu {
        top: 0 !important;
        margin-bottom: 0;
    }
    .gn-resources-pagination {
        bottom: -1px !important;
    }
}

.gn-homepage {
    .app-router {
        position: relative !important;
    }
}

.page-geostory-viewer {
    .gn-viewer-layout-center {
        position: relative;
        .ms-geostory {
            position: absolute;
        }
    }
    
    .ms-geostory-editor {
        height: 100%;
        .ms-geostory-builder {
            position: absolute;
        }
    }
}

.page-dataset-viewer,
.page-map-viewer {
    .gn-viewer-layout-body {
        // needed to compute the position of ma toolbar and background selector
        // when the attribute table is open
        transform: translate(0, 0);
    }
}

.page-dashboard-viewer {
    .gn-viewer-layout-center {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.gn-pending-changes-icon,
.gn-success-changes-icon {
    position: relative;
    &::after {
        content: '';
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        right: 2px;
        top: 2px;
        border-radius: 50%;
        .shadow-soft();
        z-index: 10;
    }
}

.gn-page-wrapper {
    overflow-x: clip;

}

div.chart-color-class-modal {
    z-index: 10;
}

.tabs-underline {
    > .nav > li {
        + li {
            margin-left: 1rem;
        }
        > a {
            padding: 0;
            border-bottom: 0.2rem solid transparent;
        }
    }
}

.pagination.custom {
    &> li > a,
    &> li > span {
        height: 30px;
        min-width: 30px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.25rem;
        border: none;
        background-color: transparent;
    }
}
